<template>
  <view class="page-content">
    <f-navbar title="首页" :isShowLeft="false"></f-navbar>
    <view class="header-block flex align-center">
      <image class="avatar" :src="require(`@/static/images/common/pic1.png`)" mode="aspectFill">
      </image>
      <view class="flex-sub user-info">
        <view class="flex align-center">
          <view class="name text-cut text-cut1">{{ userInfo.nickName || '' }}</view>
          <image class="margin-left card-icon" src="@/static/images/common/mine_card.png" @click="showCardModal">
          </image>
        </view>
        <view class="remark">{{ userInfo.myUnitName }}</view>
        <view class="tag" v-if="userInfo.position">{{
          userInfo.position
        }}</view>
      </view>
    </view>
    <view class="notice-block flex align-center" v-if="noticeList.length" @click="goLink(`/pages/common/notice`)">
      <image class="notice-icon" src="@/static/images/common/notice_icon.png"></image>
      <swiper vertical autoplay circular interval="3000" class="notice-swiper flex-sub">
        <swiper-item v-for="(item, index) in noticeList" :key="index">
          <view class="text-cut text-cut1">{{ item.noticeTitle }}</view>
        </swiper-item>
      </swiper>
      <u-icon name="arrow-right" size="28rpx" bold color="#333333"></u-icon>
    </view>
    <view class="count-box">
      <view class="count-item flex flex-direction align-center justify-center" v-for="(item, index) in countList"
        v-if="checkPermi(item.permission)" 
        :key="index" @click="goLink(item.url, item.openType, item.status)">
        <view class="item-value">{{ item.value || "0" }}</view>
        <view class="item-label">{{ item.label }}</view>
      </view>
    </view>
    <view class="menu-box">
      <view class="menu-item flex align-center"   v-if="checkPermi(item.permission)"  v-for="(item, index) in menuList" :key="index" @click="jumpDetail(item)">
        <image class="item-icon" :src="item.icon"></image>
        <view class="flex-sub">{{ item.label }}</view>
        <u-badge numberType="overflow" bgColor="#DF0E0E" max="99" :value="item.badge" v-if="item.badge"></u-badge>
        <u-icon name="arrow-right" size="28rpx" bold color="#333333"></u-icon>
      </view>
    </view>
    <tabbar :tabIndex="0"></tabbar>
    <cardModal ref="cardModal"></cardModal>
  </view>
</template>
<script>
import cardModal from "@/components/pageLayout/screenModal/cardModal.vue";
import tabbar from "@/components/tabbar/index.vue";
import {
  getPlatformConfig,
  getNoticeList,
  getIndexCount,
} from "@/api/common.js";
export default {
  components: {
    tabbar,
    cardModal,
  },
  data() {
    return {
      countList: [
        {
          label: "待派单数",
          value: 0,
          url: `/pages/order/collectionOrder/index?orderStatus=0`,
          openType: 'navigate',
          permission: ['index:pending:orders']
        },
        {
          label: "已派单数",
          value: 0,
          url: `/pages/order/collectionOrder/index?orderStatus=1`,
          openType: 'navigate',
          permission: ['index:assigned:orders']
        },
        {
          label: "消错申请数",
          value: 0,
          url: `/pages/alarm/index`,
          openType: 'switch',
          status: '0',
          permission: ['index:error:application']
        },
        {
          label: "报警次数",
          value: 0,
          url: `/pages/alarm/index`,
          openType: 'switch',
          permission: ['index:alarm:frequency']
        },
      ],
      menuList: [
        {
          label: "联系平台",
          icon: require(`@/static/images/common/call_icon.png`),
          url: `call`,
          permission: ['index:page:contact']
        },
        {
          label: "消息中心",
          icon: require(`@/static/images/common/msg_icon.png`),
          url: `/pages/common/message`,
          badge: 0,
          permission: ['index:page:message']
        },
        {
          label: "设置",
          icon: require(`@/static/images/common/set_icon.png`),
          url: `/pages/common/setting`,
          permission: ['index:page:setting']
        },
      ],
      noticeList: [],
      platformPhone: null,
    };
  },
  onPageScroll(e) { },
  onReady() { },
  onShow() {
    uni.hideTabBar();
    if (uni.getStorageSync('token')) {
      this.$store.dispatch("actionGetUserInfo");
      this.getData();
    } else {
      uni.reLaunch({
        url: '/pages/login/index'
      })
    }

  },
  onLoad(option) { },
  onHide() { },
  methods: {
    toUrl(item) {
      if (item.status) {
        Vue.prototype.$status = status
      }

      this.goLink(item.url, item.openType, item.status)
    },
    getData() {
      //获取平台电话
      getPlatformConfig({
        configKey: "platform_phone",
      }).then((res) => {
        this.platformPhone = res.rows[0].configValue;
      });

      //获取公告
      getNoticeList({
        pageNum: 0,
        pageSize: 10,
      }).then((res) => {
        this.noticeList = res.data.records;
      });

      //首页统计
      getIndexCount().then((res) => {
        const data = res.data;
        this.countList[0].value = data.pendingOrderSum;
        this.countList[1].value = data.assignedOrderSum;
        this.countList[2].value = data.errorApplicationNumber;
        this.countList[3].value = data.alarmsNumber;

        this.menuList[1].badge = data.messageNumber
      });
    },
    jumpDetail(item) {
      if (item.url == "call") {
        this.telPhone(this.platformPhone);
      } else {
        this.goLink(item.url);
      }
    },
    showCardModal() {
      this.$refs.cardModal.showModal();
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 32rpx;
  box-sizing: border-box;
  overflow: hidden;

  .header-block {
    padding: 56rpx 40rpx;
    background: linear-gradient(101deg, #47b352 1%, #47b352 29%, #1f9970 100%);
    border-radius: 13rpx;
    background-image: url("@/static/images/common/mine_bg.png");
    background-size: 100% 100%;

    .avatar {
      width: 135rpx;
      height: 135rpx;
      border: 4rpx solid #ffffff;
      border-radius: 50%;
      margin-right: 32rpx;
    }

    .user-info {
      color: #ffffff;

      .name {
        font-size: 40rpx;
        font-weight: bold;
        max-width: 360rpx;
      }

      .card-icon {
        width: 39rpx;
        height: 39rpx;
      }

      .remark {
        margin-top: 4rpx;
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.6);
      }

      .tag {
        margin-top: 8rpx;
        display: inline-block;
        padding: 0 18rpx;
        height: 35rpx;
        line-height: 35rpx;
        background: #ffbc1a;
        border-radius: 50rpx;
        font-size: 24rpx;
      }
    }
  }

  .notice-block {
    margin-top: 30rpx;
    height: 84rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 21rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 13rpx;
    padding: 0 24rpx 0 30rpx;

    .notice-icon {
      width: 34rpx;
      height: 34rpx;
    }

    .notice-swiper {
      height: 40rpx;
      line-height: 40rpx;
      margin: 0 16rpx;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .count-box {
    margin-top: 30rpx;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 31rpx;

    .count-item {
      width: 100%;
      height: 177rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 21rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 13rpx;

      .item-value {
        font-size: 42rpx;
        color: #000000;
        font-weight: bold;
      }

      .item-label {
        color: #666668;
        font-size: 26rpx;
        margin-top: 12rpx;
      }
    }
  }

  .menu-box {
    margin-top: 30rpx;
    padding: 0 30rpx;
    background: #ffffff;
    border-radius: 16rpx;

    .menu-item {
      height: 130rpx;
      border-bottom: 1rpx solid #efefef;
      font-size: 32rpx;

      &:last-child {
        border: none;
      }

      .item-icon {
        width: 67rpx;
        height: 67rpx;
        margin-right: 32rpx;
      }
    }
  }
}
</style>
